<template>
	<h2>盲盒详情</h2>
	<div id="oneGrid" class="login-container" :style="{ boxShadow: `var(--el-box-shadow-light)` }">
		<el-image class="image" :size="60" :src="entity.imageUrl"></el-image>
		<h2>标题: {{entity.title}}</h2>
		<h3>作者: {{entity.author}}</h3>
		<h3>盲盒数量: {{entity.availableQuantity}}/{{entity.totalQuantity}}</h3>
		<h3>介绍: {{entity.content}}</h3>
		<h3>单个盲盒所需积分: {{entity.integralRequired}}</h3>
		<el-button type="primary" @click="extractTheBlindBox()" :key="isAble">抽取盲盒&nbsp;&nbsp;
			
		</el-button>
		<el-input-number v-model="times" :min="1" :max="5" controls-position="right" 
				@change="handleChange" />
	</div>
</template>

<script>
	import localStorage from '/src/utils/localstorage.js'
	import {
		ElMessageBox,
		// ElMessage
	} from 'element-plus'

	export default {
		name: "JigsawPuzzleDetails",
		data() {
			return {
				isAble: false,
				// centerDialogVisible:true,
				times: '1',
				entity: {},
				//抽到的图块碎片的位置序号
				piecesPosition: '',
				array: [],
			}
		},
		mounted() { //挂载之后执行的方法
			this.getJigsawPuzzleDetails();
		},
		methods: {
			//抽取盲盒
			extractTheBlindBox() {
				this.$axios.get('/api/blind/box/extractTheBlindBox',{
					params:{
						blindBoxId:this.entity.blindBoxId,
						// userId:this.entity.userId,
						jigsawPuzzleId:this.entity.jigsawPuzzleId,
						times:this.times,
					}
				}).then(res => {
					console.log("res.piecesPosition=" + res.piecesPosition)
					this.piecesPosition = res.piecesPosition;
					//弹窗提示
					ElMessageBox.confirm(
							'恭喜您抽中了' + this.entity.title + '的第' + this.piecesPosition + '个碎片',
							'success', {
								cancelButtonText: '继续抽盲盒',
								confirmButtonText: '去拼图',
								type: 'success',
							}
						)
						.then(() => {
							console.log("转到拼图页")
							this.$router.push('/jigsawPuzzleList')
					
						})
						.catch(() => {
							console.log("继续开盲盒")
					
						})

				})
				
			},
			//查询盲盒详情
			getJigsawPuzzleDetails() {
				this.entity.id = localStorage.get('blindBoxId')
				// localStorage.get('jid')
				console.log("this.entity.id=" + this.entity.id)
				this.$axios.get('/api/blind/box/getBlindBoxInfo', {
						params: {
							blindBoxId: this.entity.id
						}
					})
					.then(data => {
						this.entity = data.entity;

					})
			},
			//改变 input数字控件的值
			handleChange(number) {
				this.number = number;
				// console.log("this.number=" + this.number)
			}
		}
	}
</script>

<style scoped>
	.image {
		float: left;
		display:inline-block;
		width: 400px;
	}
</style>
